<template name="appCreate">


<h4 id="createWallet" class="ui pageHeader header">
  <i class="tiny plus icon"></i>
  <div class="content">
    Create Wallet
  </div>
</h4>

<div class="ui segment pageSegment">


  <div class="ui bottom attached segment">
    <div class="ui grid stackable">
      <div class="eight wide column">
        <div id="passphraseArea" class="ui form">
          <div class="field">
            <label>Passphrase</label>
            <div class="ui left icon input">
              <input type="password" id="passphrase" >
              <i class="lock icon"></i>
            </div>
          </div>
          <div class="field">
            <label>Confirm Passphrase</label>
            <div class="ui left icon input">
              <input type="password" id="passphraseConfirm" >
              <i class="lock icon"></i>
            </div>
          </div>
          <p>Your passphrase must contain at least 8 characters, and contain at least 1 number and 1 letter.</p>
        </div>

        <div id="xmssHeightDropdown" class="ui fluid selection dropdown">
          <input type="hidden" id="xmssHeight" value="10">
          <i class="dropdown icon"></i>
          <div class="default text">XMSS Tree Height</div>
          <div class="menu">
            <div class="item" data-value="8">
              <i class="tree icon"></i>
              Tree Height: 8, Signatures: 256
            </div>
            <div class="item" data-value="10">
              <i class="tree icon"></i>
              Tree Height: 10, Signatures: 1,024
            </div>
            <div class="item" data-value="12">
              <i class="tree icon"></i>
              Tree Height: 12, Signatures: 4,096
            </div>
            <div class="item" data-value="14">
              <i class="tree icon"></i>
              Tree Height: 14, Signatures: 16,384
            </div>
            <div class="item" data-value="16">
              <i class="tree icon"></i>
              Tree Height: 16, Signatures: 65,536
            </div>
            <div class="item" data-value="18">
              <i class="tree icon"></i>
              Tree Height: 18, Signatures: 262,144
            </div>
          </div>
        </div>
        <br />
        <div id="hashFunctionDropdown" class="ui fluid selection dropdown">
          <input type="hidden" id="hashFunction" value="SHAKE_128">
          <i class="dropdown icon"></i>
          <div class="default text">Hash Function</div>
          <div class="menu">
            <div class="item" data-value="SHAKE_128">
              <i class="hashtag icon"></i>
              Hash Function: SHAKE_128 (Default)
            </div>
            <div class="item" data-value="SHAKE_256">
              <i class="hashtag icon"></i>
              Hash Function: SHAKE_256
            </div>
            <div class="item" data-value="SHA2_256">
              <i class="hashtag icon"></i>
              Hash Function: SHA2_256
            </div>
          </div>
        </div>
      </div>
      <div class="eight wide column">
        <div class="ui warning icon message">
          <i class="warning icon"></i>
          <div class="content">
            <p>This passphrase encrypts the sensitive information that can unlock your wallet file, including your address, hexseed and mnemonic phrase. You will need this passphrase, and wallet file to unlock your wallet file in future. <br /><br />By default an XMSS Tree height of 10 provides 1024 One Time Signatures. Larger XMSS Tree heights will take longer to generate, please be patient.</p>
          </div>
        </div>
      </div>
    </div>

    <br />
    <button id="generate" class="ui huge primary button red">Create Wallet</button>
  </div>


  <div id="generating" style="display: none;">
    <div class="ui icon message">
      <i class="notched circle loading icon"></i>
      <div class="content">
        <div class="header">
          Just a moment
        </div>
        <p>Generating new wallet...</p>
      </div>
    </div>
  </div>

  <div id="error" style="display: none;">
    <div class="ui red segment">
      <h4>Error!</h4>
      <p>There was a problem generating your new wallet. Please refresh this page and try again.</p>
    </div>
  </div>

  <div id="passError" style="display: none;">
    <div class="ui red segment">
      <h4>Error!</h4>
      <p>Please enter a passphrase that is at least 8 characters in length, and contains at least 1 number and 1 letter.</p>
    </div>
  </div>

  <div id="passMismatchError" style="display: none;">
    <div class="ui red segment">
      <h4>Error!</h4>
      <p>Your passphrases do not match. Please carefully type your passphrase into each box and try again.</p>
    </div>
  </div>
</div>

</template>